---
title: <AuthView />
---

The `<AuthView />` component provides an interactive and customizable authentication interface that seamlessly integrates with your authentication flow. It supports multiple authentication methods, including email/password, magic links, passkey (WebAuthn), and social providers.

## Reference

The following props can be passed to `<AuthView />` for customization:

<AutoTypeTable path="../src/components/auth/auth-view.tsx" name="AuthViewProps" />

## Examples

Below are practical usage examples demonstrating common scenarios:

### Specifying Initial View

You can specify the current view manually using the `view` prop:

```tsx
<AuthView view="SIGN_IN" />
```

### Custom Redirect After Authentication

Customize the navigation after successful authentication using the `redirectTo` prop:

```tsx
<AuthView redirectTo="/dashboard" />
```

## Localization

You can pass custom localization texts to fit different languages or contexts:

```tsx
<AuthView
    localization={{
        SIGN_IN: "Log in",
        SIGN_UP: "Register",
        MAGIC_LINK: "Sign in with Email",
    }}
/>
```

## Styling

You can thoroughly customize `<AuthView />` components using TailwindCSS utility classes and the provided `classNames` prop:

```tsx
<AuthView
    classNames={{
        base: "border-2 border-destructive max-w-xs",
        header: "bg-destructive/30",
        title: "text-xl text-destructive font-semibold",
        footerLink: "text-destructive hover:text-foreground",
    }}
/>
```